<template>
  <div>
    <a-input
      v-model:value="data.value"
      placeholder="Basic usage"
    />
    <a-space
      :size="30"
    >
      <a-button
        type="primary"
        @click="chang"
      >
        切换布局
      </a-button>
      <a-button
        type="primary"
      >
        执行proxy
      </a-button>
    </a-space>
    <router-view
      v-slot="{Component, route}"
      v-if="!name"
    >
      <keep-alive>
        <component
          :is="Component"
          v-if="route.meta && route.meta?.keepAlive"
        />
      </keep-alive>

      <component
        :is="Component"
        v-if="route.meta && !route.meta?.keepAlive"
      />
    </router-view>

    <router-view
      v-slot="{Component, route}"
      name="KeepTrue2"
      v-else-if="name==='KeepTrue2'"
    >
      <keep-alive v-if="route.meta && route.meta?.keepAlive">
        <component
          :is="Component"
        />
      </keep-alive>
      <component
        :is="Component"
        v-if="route.meta && !route.meta?.keepAlive"
      />
    </router-view>
  </div>
</template>
<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, getCurrentScope } from 'vue'
export default defineComponent({
  name: 'KeepAliveAbout',
  setup () {
    const data = reactive<{value:number, name:null | string}>({ value: 123, name: null })
    onBeforeMount(() => {
      //  2.组件挂载页面之前执行----onBeforeMount
    })
    onMounted(() => {
      // 3.组件挂载到页面之后执行-------onMounted
      console.log(getCurrentScope())
    })

    const chang = () => {
      if (data.name) {
        data.name = null
      } else {
        data.name = 'KeepTrue2'
      }
      const arr = [1, 2, 3]
      console.log(Array.from(arr, x => x + x), 'arry')
    }
    return {
      data,
      ...toRefs(data),
      chang
    }
  }
})
</script>

<style scoped lang='less'>
</style>
